<template>
   <div class="pageS">
     <div class="width1200">
       <div class="tip">
         检索词『<span style="color: red">{{$route.query.search}}</span>』共{{dataList.length}}条结果
       </div>
         <ul v-infinite-scroll="load" class="scroll" infinite-scroll-delay='1000'>
           <card-items :par="par" v-for="item,index in dataList" :data="item" :key="index"></card-items>
         </ul>
     </div>
    </div>

</template>

<script>
import searchForm from "@/views/searchPage/components/searchForm";
import cardItems from "@/views/searchPage/components/cardItems";
export default {
  name: "searchPage",
  components:{
    searchForm,cardItems
  },
  mounted() {
    this.getInfo()
  },
  data(){
    return{
      dataList:[],
      par:'',
      page:0,
      total:0
    }
  },
  watch:{
    '$route.query.search'(val,val1){
      this.page = 0
      this.search()
    },
  },
  methods:{
    load(){
      this.page++
      this.getInfo()
    },
    search(){
      this.page = 0
      this.dataList = []
      this.getInfo()
    },
    getInfo(){
      if(this.page*10>this.total&&this.total>0){
        return
      }
      this.par = this.$route.query.search
      let params = {
        data:this.$route.query.search,
        page:this.page,
        pageSize:10
      }
      this.$api.searchHome(params).then(res=>{
        this.total=res.data.recordsTotal
        res.data.data.forEach(item=>{
          this.dataList.push(item)
        })
      })
    }
  }
}
</script>

<style scoped lang="less">

.pageS{
  background: #EFF3EF;
  width: 100%;
  //height: 100%;
  padding-top: 132px;
  overflow-y: auto;
  .tip {
    font-size: 18px;
    color: #333333;
    line-height: 48px;
    background-color: white;
    padding: 10px;
    width: calc(100% - 20px);
    height: 48px;
    margin-bottom: 20px;
  }
  .scroll{
    overflow-y:auto;
    //height:300px;
    height: calc(100% - 400px);
  }
}

</style>
